<template>
  <div class="app-container">
    <FilterSearch class="filter-search" :value="queryParams" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }"
      :config="configData" labelWidth="120px" position="right"></FilterSearch>
    <div class="main">
      <div class="tips">
        <div class="tip">
          <span class="tit">
            开始时间:
          </span>
          <span class="txt">
            {{ getDate(param.startTime) }}
          </span>
        </div>
        <div class="tip">
          <span class="tit">
            结束时间:
          </span>
          <span class="txt">
            {{ getDate(param.endTime) }}
          </span>
        </div>
        <div class="tip">
          <span class="tit">
            间隔时间:
          </span>
          <span class="txt">
            {{ param.intervalTime }}
          </span>
        </div>
      </div>
      <div class="row-a1">
        <div class="con">
          <div class="left">
            <div class="tit">
              原始数据
            </div>
            <div class="table" @mousemove="originIn" @mouseout="originOut">
              <el-table ref="originTable" stripe :data="tableData.original" border v-loading="tableData.loading"
                style="width: 100%;" :height="350" header-row-class-name="header-cell-1">
                <!-- <el-table-column prop="id" label="id" width="80">

                </el-table-column>
                <el-table-column prop="importId" label="批次编号" width="140">
                </el-table-column> -->
                <el-table-column id="text1" prop="originalTexts" label="">
                  <template v-slot="scope">
                    <div>
                      {{ scope.row.id }}, {{ scope.row.importId }}, {{ getDate(scope.row.createdTime) }}
                    </div>
                    <el-popover placement="top-start" :width="800" trigger="hover">
                      <div style="max-height: 150px;">
                        <el-scrollbar :height="150">
                          {{ scope.row.originalTexts }}
                        </el-scrollbar>
                      </div>
                      <template #reference>
                        <div class="ellipsis_1">
                          -{{ scope.row.originalTexts }}
                        </div>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="right">
            <div class="tit">
              可视化数据
            </div>
            <div class="table" @mousemove="visualIn" @mouseout="visualOut">
              <el-table stripe ref="visualTable" :data="tableData.visual" border v-loading="tableData.loading"
                style="width: 100%;" :height="350" header-row-class-name="header-cell-2">
                <el-table-column prop="id" label="">
                  <template v-slot="scope">
                    <div>
                      {{ scope.row.id }}, {{ scope.row.importId }}, {{ getDate(scope.row.createdTime) }}
                    </div>
                    <el-popover placement="top-start" :width="800" trigger="hover">
                      <div style="max-height: 150px;">
                        <el-scrollbar :height="150">
                          {{ scope.row.visualText }}
                        </el-scrollbar>
                      </div>
                      <template #reference>
                        <div class="ellipsis_1">
                          -{{ scope.row.visualText }}
                        </div>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="row-a2">
        <div class="con">
          <div class="tit">
            日志管理
          </div>
          <div class="table" @mousemove="errorIn" @mouseout="errorOut">
            <el-table ref="errorTable" stripe :data="tableData.error" border v-loading="tableData.loading"
              style="width: 100%;" :height="350">
              <el-table-column prop="id" label="id" width="80">
                <template v-slot="scope">
                  <div :class="getClass(scope.row)">
                    {{ scope.row.id }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="importId" label="批次编号" width="140">
                <template v-slot="scope">
                  <div :class="getClass(scope.row)">
                    {{ scope.row.importId }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="originalIds" label="原始数据id" width="140">
                <template v-slot="scope">
                  <div :class="getClass(scope.row)">
                    {{ scope.row.originalIds }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="originalDetailIds" label="原始数据对象id" minWidth="300">
                <template v-slot="scope">
                  <div :class="getClass(scope.row)">
                    <el-popover placement="top-start" :popper-class="getClass(scope.row)" :width="500" trigger="hover">
                      <div style="max-height: 100px;">
                        <el-scrollbar :height="100">
                          <div :style="getStyle(scope.row)">
                            {{ scope.row.originalDetailIds }}
                          </div>
                        </el-scrollbar>
                      </div>
                      <template #reference>
                        <div class="ellipsis_1">
                          {{ scope.row.originalDetailIds }}
                        </div>
                      </template>
                    </el-popover>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="visualIds" label="可视化数据id" width="120">
                <template v-slot="scope">
                  <div :class="getClass(scope.row)">
                    {{ scope.row.visualIds }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="visualDetailIds" label="可视化数据对象id" width="140">
                <template v-slot="scope">
                  <div :class="getClass(scope.row)">
                    {{ scope.row.visualDetailIds }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="logContent" label="算法函数返回结果" minWidth="500">
                <template v-slot="scope">
                  <div :class="getClass(scope.row)">
                    {{ scope.row.logContent }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {
  selectByIds, selectVisual, selectOriginal, selectError, selectSus, pauseTask, startTask,
  exportTxt
} from "@/api/taskRunner.js"
import { formatDate } from "@/utils/index.js"
import { formData } from "@/utils/validate.js"
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const tableData = reactive({
      original: [],
      visual: [],
      error: [],
      visualColumn: [],
      visualDefaultColumn: [
        {
          prop: "id",
          label: "id",
          minWidth: 60
        },
        {
          prop: "importId",
          label: "批次编号",
          minWidth: 140
        },
        {
          prop: "visualDataId",
          label: "可视化数据id",
          minWidth: 140
        },
        {
          prop: "originalIds",
          label: "原始数据id",
          minWidth: 140
        },
        {
          prop: "originalDetailIds",
          label: "原始数据详情id",
          minWidth: 140
        }
      ],
      loading: false,
      originalInd: true,
      visualInd: true,
      errorInd: true
    });
    const queryParams = ref({
      currentPage: 1,
      size: 10,
      algorId: ""
    });
    const param = ref({
      algorIds: null,
      id: null,
      startTime: null,
      endTime: null,
      intervalTime: null,
      btnStatus: null
    })
    const timeing = {
      timeout: null,
      status: false,
      originLoad: null,
      visualLoad: null,
      errorLoad: null,
      originTime: null,
      visualTime: null,
      errorTime: null,

      ms: 500
    };
    const algorList = ref([]);
    const configData = computed(() => {
      let config = {
        itemConfig: [
          {
            type: "select",
            prop: "algorId",
            clearable: "关闭",
            label: "算法模型列表",
            placeholder: "请输入",
            filterable: true,
            optList: proxy.algorList
          }
        ],
        operate: [
          {
            icon: "Operation",
            type: "primary",
            name: proxy.param.btnStatus ? "开始解析" : "暂停解析",
            handleClick: pause,
            rule: true,
          },
          {
            icon: "Crop",
            type: "primary",
            name: "日志导出",
            handleClick: exportLog,
            rule: true,
          }
        ],
        rules: {},
      };
      return config;
    })

    function getLoad() {
      selectByIds(proxy.param.algorIds).then(res => {
        proxy.algorList = res.data;
        proxy.queryParams.algorId = res.data[0].id;
        proxy.tableData.loading = true;
        let originalId = 0;
        let visualId = 0;
        if (proxy.tableData.original.length > 0) {
          originalId = proxy.tableData.original[proxy.tableData.original.length.length - 1].id;
        }
        if (proxy.tableData.visual.length > 0) {
          visualId = proxy.tableData.visual[proxy.tableData.visual.length.length - 1].id;
        }

        selectOriginal({ taskId: proxy.param.id, algorId: res.data[0].id, id: originalId }).then(res => {
          if (res.data.length > 0) {
            proxy.tableData.original = res.data;
            document.getElementsByClassName('header-cell-1')[0].children[0].children[0].innerHTML=`ID，批次，时间<br />-原始数据内容`;
          }
          proxy.tableData.loading = false;
          timeing.originLoad = setTimeout(() => {
            if (proxy.tableData.original.length > 7) {
              proxy.$refs.originTable.setScrollTop((proxy.tableData.original.length - 7) * 40);
            }
          }, 200);

        })
        selectVisual({ taskId: proxy.param.id, algorId: res.data[0].id, id: visualId }).then(res => {
          let column = proxy.tableData.visualDefaultColumn;
          if (res.data.length > 0) {
            proxy.tableData.visual = res.data;
            let row = JSON.parse(res.data[0].visualText);
            for (const key in row) {
              column.splice(column.length - 2, 0, {
                prop: key,
                label: key,
                minWidth: 200
              })
            }
            proxy.tableData.visualColumn = column;
            document.getElementsByClassName('header-cell-2')[0].children[0].children[0].innerHTML=`ID，批次，时间<br />-可视化数据内容`;
          }

          timeing.visualLoad = setTimeout(() => {
            if (proxy.tableData.visual.length > 7) {
              proxy.$refs.visualTable.setScrollTop((proxy.tableData.visual.length - 7) * 40);
            }
          }, 200);
          timeing.timeout = setTimeout(() => {
            getLoad2();
          }, 1000);
          proxy.tableData.loading = false;
        })
        selectError({ taskId: proxy.param.id, algorId: res.data[0].id, id: originalId }).then(res => {
          if (res.data.length) {
            proxy.tableData.error = res.data;
          }
          proxy.tableData.loading = false;
          timeing.errorLoad = setTimeout(() => {
            if (proxy.tableData.error.length > 7) {
              proxy.$refs.errorTable.setScrollTop((proxy.tableData.error.length - 7) * 40);
            }
          }, 200);
        })
      })
    }
    function getLoad2() {
      if (timeing.timeout) {
        clearTimeout(timeing.timeout);
      }
      let originalId = 0;
      let visualId = 0;
      let errorId = 0;
      if (proxy.tableData.original.length > 0) {
        originalId = proxy.tableData.original[proxy.tableData.original.length - 1].id;
      }
      if (proxy.tableData.visual.length > 0) {
        visualId = proxy.tableData.visual[proxy.tableData.visual.length - 1].id;
      }
      if (proxy.tableData.error.length > 0) {
        errorId = proxy.tableData.error[proxy.tableData.error.length - 1].id;
      }
      timeing.status = true;

      selectOriginal({ taskId: proxy.param.id, algorId: proxy.queryParams.algorId, id: originalId }).then(res => {
        if (res.data.length > 0) {
          proxy.tableData.original = proxy.tableData.original.concat(res.data);
          proxy.tableData.loading = false;

          timeing.originTime = setTimeout(() => {
            if (proxy.tableData.originalInd) {
              if (proxy.tableData.original.length > 7) {
                proxy.$refs.originTable.setScrollTop((proxy.tableData.original.length - 7) * 40);
                clearTimeout(timeing.originTime);
              }
            }
          }, 100);

        }
      })

      selectVisual({ taskId: proxy.param.id, algorId: proxy.queryParams.algorId, id: visualId }).then(res => {
        if (res.data.length > 0) {
          let column = proxy.tableData.visualDefaultColumn;
          let row = JSON.parse(res.data[0].visualText);
          for (const key in row) {
            column.splice(column.length - 2, 0, {
              prop: key,
              label: key,
              minWidth: 200
            })
          }
          proxy.tableData.visualColumn = column;

          proxy.tableData.loading = false;
          proxy.tableData.visual = proxy.tableData.visual.concat(res.data);

          timeing.visualTime = setTimeout(() => {
            if (proxy.tableData.visualInd) {
              if (proxy.tableData.visual.length > 7) {
                proxy.$refs.visualTable.setScrollTop((proxy.tableData.visual.length - 7) * 40);
                clearTimeout(timeing.visualTime);
              }
            }
          }, 100);

        }
      })

      selectError({ taskId: proxy.param.id, algorId: proxy.queryParams.algorId, id: errorId }).then(res => {
        if (res.data.length > 0) {
          proxy.tableData.error = proxy.tableData.error.concat(res.data);
          proxy.tableData.loading = false;

          timeing.errorTime = setTimeout(() => {
            if (proxy.tableData.errorInd) {
              if (proxy.tableData.error.length > 7) {
                proxy.$refs.errorTable.setScrollTop((proxy.tableData.error.length - 7) * 40);
                clearTimeout(timeing.errorTime);
              }
            }
          }, 100);

        }
        timeing.timeout = setTimeout(() => {
          getLoad2();
        }, 1000);
      })

    }
    function pause() {
      if (proxy.param.btnStatus) {
        proxy.param.btnStatus = false;
        startTask(proxy.param.id).then(res => {
        })
      } else {
        proxy.param.btnStatus = true;
        pauseTask(proxy.param.id).then(res => {

        })
      }
    }
    function exportLog() {
      exportTxt(formData({ taskId: proxy.param.id })).then(res => {
        const a = document.createElement('a');
        const blob = new Blob([res], { type: 'application/octet-stream' })
        const objectUrl = URL.createObjectURL(blob);
        a.setAttribute('href', objectUrl)
        a.setAttribute('download', '日志.txt')
        a.click()
      })
    }
    const getDate = (date) => {
      return formatDate(date)
    }
    function getData(data) {
      return JSON.parse(data);
    }
    function getClass(row) {
      let status = row.logContent ? JSON.parse(row.logContent) : { code: 1 };
      return status['code'] != 0 ? 'error' : '';
    }
    function getStyle(row) {
      let status = row.logContent ? JSON.parse(row.logContent) : { code: 1 };
      return status['code'] != 0 ? 'color:#ff0000;' : '';
    }
    function originIn() {
      proxy.tableData.originalInd = false;
    }
    function originOut() {
      proxy.tableData.originalInd = true;
    }
    function visualIn() {
      proxy.tableData.visualInd = false;
    }
    function visualOut() {
      proxy.tableData.visualInd = true;
    }
    function errorIn() {
      proxy.tableData.errorInd = false;
    }
    function errorOut() {
      proxy.tableData.errorInd = true;
    }

    onMounted(() => {
      if (router.currentRoute.value.params.id) {
        let params = router.currentRoute.value.params;
        proxy.param = params;
        getLoad();
        selectSus(params.id).then(res => {
          proxy.param.btnStatus = res.data;
        })
      } else {
        router.replace("/testtask");

      }
    })

    onBeforeUnmount(() => {
      clearTimeout(timeing.originLoad);
      clearTimeout(timeing.visualLoad);
      clearTimeout(timeing.errorLoad);
      clearTimeout(timeing.originTime);
      clearTimeout(timeing.visualTime);
      clearTimeout(timeing.errorTime);
      clearTimeout(timeing.timeout);
    })
    return {
      tableData, queryParams, configData, algorList,
      getDate, getData, getLoad2, errorIn, errorOut, originIn, originOut,
      visualIn, visualOut, getClass, getStyle, param
    }
  }
}

</script>

<style scoped lang="scss">
.main {
  // height: calc(100vh - 175px);
  overflow: hidden;
}

.ellipsis_1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.ellipsis_3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.tips {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  .tip {
    line-height: 35px;
    margin-right: 30px;

    .tit {
      font-size: 14px;
      font-weight: 700;
      padding-left: 0px;
    }

    .txt {
      font-size: 14px;
    }
  }
}

.row-a1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 20px;

  .con {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .left {
      width: 49%;
    }

    .right {
      width: 49%;
    }


    .tit {
      font-weight: bold;
      font-size: 14px;
      line-height: 35px;
    }

    .table {
      width: 100%;
      border: solid 1px #2f3f54;
      border-radius: 4px;
      padding: 1px;
    }
  }

}

.row-a2 {
  display: flex;
  flex-direction: column;
  height: 100%;

  .con {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;

    .tit {
      font-weight: bold;
      font-size: 14px;
      line-height: 35px;
    }

    .table {
      width: 100%;
      border: solid 1px #2f3f54;
      border-radius: 4px;
      padding: 1px;

      .error {
        color: #ff0000 !important;
      }

      :deep(.error) {
        color: #ff0000 !important;
      }
    }
  }

}
</style>

